@ts-nocheck
<template>
  <el-row :gutter="20">
    <el-col :sm="24" :md="12" style="padding-top: 12px">
      <el-alert title="移交至本扇区：" type="warning" :closable="false">
      </el-alert>
      <el-table :data="tableData.in" style="width: 100%" stripe :default-sort="{ prop: 'handout', order: 'asending' }">
        <el-table-column prop="handout" label="移交方" sortable width="100" resizable align="center">
          <template #default="scope">
            <el-button v-for="(item, index) in scope.row.handout" :key="'handout-' + index" round plain type="warning"
              size="small" style="padding: 4px 8px; margin: 2px">
              {{ item }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="移交高度" min-width="100" resizable align="center">
          <template #default="scope">
            <el-button v-for="(item, index) in scope.row.levels" :key="'levels-' + index" round plain type="primary"
              size="small" style="padding: 4px 8px; margin: 2px">
              {{ item }}
            </el-button>
            <span v-for="(item, index) in scope.row.restrictedLevels" :key="'restrictedLevels-' + index">
              <el-tooltip v-for="(item2, index2) in item.levels" :key="'restrictedLevels-' + index + '-' + index2"
                effect="light" :content="item.remark" placement="bottom">
                <el-button round plain type="danger" size="small" style="padding: 4px 8px; margin: 2px">{{ item2 }}
                </el-button>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="程序/航线" resizable min-width="150" align="center">
          <template #default="scope">
            <span v-for="(detail, index) in scope.row.route" :key="'route-' + index">
              <el-tooltip v-if="detail.remark.length == 0" class="detail" effect="light"
                :content="'机场: ' + detail.airports.join(' , ')" placement="bottom">
                <el-button v-if="detail.remark.length == 0" plain text type="info" size="small"
                  style="padding: 4px 8px; margin: 2px">
                  {{ detail.route }}
                </el-button>
              </el-tooltip>
              <el-tooltip v-else effect="light" placement="bottom-end">
                <template #content> #content>{{ detail.remark }}<br />机场: {{ detail.airports.join(" , ") }}</template>
                <el-button round plain text type="primary" size="small" style="padding: 4px 8px; margin: 2px">{{
                    detail.route
                }}</el-button>
              </el-tooltip>
              <!-- <el-tag type="info" size="small" effect="plain" class="tag-route"> {{ detail.airports.join(' , ') }}
              </el-tag> -->
              <!-- <el-tag v-if="detail.remark.length > 0" type="info" size="small" effect="plain" class="tag-route"> {{
                  detail.remark
              }}
              </el-tag> -->
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :sm="24" :md="12" style="padding-top: 12px">
      <el-alert title="从本扇区交出：" type="success" :closable="false"></el-alert>
      <el-table :data="tableData.out" style="width: 100%" stripe :default-sort="{ prop: 'handin', order: 'asending' }">
        <el-table-column prop="handin" label="接收方" sortable width="100" resizable align="center">
          <template #default="scope">
            <el-button v-for="(item, index) in scope.row.handin" :key="'handin-' + index" round plain type="success"
              size="small" style="padding: 4px 8px; margin: 2px">
              {{ item }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="移交高度" resizable min-width="100" align="center">
          <template #default="scope">
            <el-button v-for="(item, index) in scope.row.levels" :key="'levels-' + index" round plain type="primary"
              size="small" style="padding: 4px 8px; margin: 2px">
              {{ item }}
            </el-button>
            <span v-for="(item, index) in scope.row.restrictedLevels" :key="'restrictedLevels-' + index">
              <el-tooltip v-for="(item2, index2) in item.levels" :key="'restrictedLevels-' + index + '-' + index2"
                effect="light" :content="item.remark" placement="bottom">
                <el-button round plain type="danger" size="small" style="padding: 4px 8px; margin: 2px">{{ item2 }}
                </el-button>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="程序/航线" resizable min-width="150" align="center">
          <template #default="scope">
            <span v-for="(detail, index) in scope.row.route" :key="'route-' + index">
              <el-tooltip v-if="detail.remark.length == 0" class="detail" effect="light"
                :content="'机场: ' + detail.airports.join(' , ')" placement="bottom">
                <el-button v-if="detail.remark.length == 0" plain type="info" size="small" text
                  style="padding: 4px 8px; margin: 2px">
                  {{ detail.route }}
                </el-button>
              </el-tooltip>
              <el-tooltip v-else effect="light" placement="bottom-end">
                <template #content>{{ detail.remark }}<br />机场: {{ detail.airports.join(" , ") }}</template>
                <el-button plain type="primary" size="small" text style="padding: 4px 8px; margin: 2px">{{
                detail.route
                }}</el-button>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
import { mapWritableState } from 'pinia'
import useTransferStore from '@/store/transfer';
export default {
  setup() {
    const { transferStore } = useTransferStore;
    return {
      transferStore,
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapWritableState(useTransferStore, {
      table: 'table',
    }),
    tableData() { return this.table; },
  },
  methods: {

  },
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>